<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用canvas生成图形验证码</title>
    <link rel="stylesheet" href="1.css">
   
</head>
<body>   
    <!-- https://www.jb51.net/article/180616.html -->
    <!-- 在canvas中设置宽高和在style中设置是有区别的，建议直接在canvas标签中设置 -->
    <!-- 先构建一个画布，设置一定的宽高，封装一个生成随机数的方法，为(干扰线和点)线条和圆形的绘制设置随机的位置，
    既然是随机的，必然是有随机的区间，先获取画布的宽高，线条和圆的位置就是（0~画布的宽高区间）的随机位置，
    再定义一个随机字符，获取随机的索引值，即可生成随机的验证码。
    将代码封装在函数里，用一个事件触发即可 -->

    <div class="box">   
        <h1>用户登录</h1>
        <hr>
        <input class="input1" type="text" placeholder="请输入账号">
        <input class="input1" type="password" placeholder="请输入密码">
        <div class="yzm">
            <input type="text" onchange="checkCode()" id="input-yzm" placeholder="请输入验证码">
            <!-- canvas的宽高属性和使用css设置宽高有所不同 -->
            <canvas id="canvas1" width="130px" height="45px" >
                你的浏览器不支持canvas，请升级你的浏览器
            </canvas>
            <a href="javascript:reDraw();">看不清换一个</a> 
        </div>
        <span id="info"></span>
        <div>
            <div>
                <input type="checkbox">记住用户名
            </div>
            <a href="#">忘记密码?</a>
        </div>
        <input class="btn" type="button" value="登录">
        <input class="btn" type="button" value="注册">
    </div>

    <script src="1.js"></script>
</body>
</html>